<template>
	<view>
		<view class="flex " :class="[type==1?'flex_wrap flex_sb fw-item2':'']">
			<view class="fw-item" :style="{'marginRight':type==2?'20rpx':'0'}" v-for="(item,index) in mylist"
				:key="index">
				<view class="flex wid232">
					<view class="lef-icon">
						<image class="lef-icon" :src="item.icon" mode="aspectFill"></image>
					</view>
					<view class="u-m-l-16 wid100">
						<view class="flex flex_sb wid100">
							<view class="font_16_333 font_weight">
								{{item.name}}
							</view>
							<view class="sj-st" v-if="item.status==1">已上架</view>
							<view class="font_12_999" v-else>已下架</view>
						</view>
						<view class="font_12_666 u-m-t-14" v-if="item.price">
							￥
							{{item.price}}
							/{{item.time_sku}}{{item.unit}}
							<!-- 单位 1次 2分钟 3小时 4天 5秒 -->
						</view>

					</view>
				</view>
				<view class="font_10_666 u-m-t-24"  v-if="item.content">
					{{item.content}}
				</view>
				<view class=" flex flex_end u-m-t-16">
					<view class="xd-btn2" @click="peizhi(item)">
						配置
					</view>
					<view class="xd-btn u-m-l-16" @click="changestatus(item,2)" v-if="item.status==1">
						下架
					</view>
					<view class="xd-btn u-m-l-16" @click="changestatus(item,1)" v-else>
						上架
					</view>
				</view>
			</view>

		</view>


		<u-popup v-model="pzShow" mode="bottom" border-radius="32" >
			<view class="po-bikan">
				<view class="po-bikan-top">
					<view class="flex flex_cen u-m-b-32">
						<!-- <view class="font_16_999" @click="pzShow=false">
							取消
						</view> -->
						<view class="bk-title ">
							商品配置
						</view>
						<!-- <view class="qr-btn" @click="submit">
							确认
						</view> -->
					</view>
					<view class="bk-title u-m-t-24">
						计算单位
					</view>
					<view class="js-div flex flex_sb u-m-t-24">
						<view class="js-item" :class="selList.unit==item.id?'js-item-sel':''" @click="jssel(item)"
							v-for="(item,index) in jsList" :key="index">
							{{item.name}}
						</view>
					</view>
					<view class="bk-title u-m-t-24">
						配置时间规格
					</view>
					<view class="gg-in flex flex_sb">
						<u-input class="gg-input" v-model="selList.time_sku" />
						<view class="font_12_666">
							{{jsValue}}
						</view>
					</view>
					<view class="bk-title u-m-t-24">
						配置价格
						<!-- <span class="font_12_999 font_weight_normal u-m-l-20">最低价格：￥49.90</span> -->
					</view>
					<view class="gg-in flex flex_sb">
						<u-input class="gg-input" v-model="selList.price" />
						<view class="font_12_666">
							元
						</view>
					</view>
				</view>

				<view class="btn-bo">
					<button class="btn_login_btn" @click="submit">
						确定
					</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "fuwuList",
		props: {
			type: {
				type: String,
				default: '1'
			},

		},
		data() {
			return {
				pzShow: false,

				jsList: [{
					name: '次',
					id: 1
				}, {
					name: '分钟',
					id: 2
				}, {
					name: '小时',
					id: 3
				}, {
					name: '天',
					id: 4
				}, {
					name: '秒',
					id: 5
				}], // <!-- 单位 1次 2分钟 3小时 4天 5秒 -->
				// jsIndex: -1,
				jsValue: '',
				// value: '',
				mylist: [],
				selList: [],
				list: [
					// {
					// 	name: '电话咨询',
					// 	content: '1对1电话快速咨询',
					// 	image: require('../../static/img/home/t-1.png'),
					// 	money: '29.9',
					// 	danwei: '60分钟',
					// 	state: '1'
					// },
					// {
					// 	name: '图文咨询',
					// 	content: '1对1在线深度解答',
					// 	image: require('../../static/img/home/t-2.png'),
					// 	money: '29.9',
					// 	danwei: '60分钟',
					// 	state: '1'
					// },
					// {
					// 	name: '律师函',
					// 	content: '以律所名义快速发函',
					// 	image: require('../../static/img/home/t-3.png'),
					// 	money: '29.9',
					// 	danwei: '60分钟',
					// 	state: '1'
					// },
					// {
					// 	name: '文书代写',
					// 	content: '定制化协议代写服务',
					// 	image: require('../../static/img/home/t-4.png'),
					// 	money: '29.9',
					// 	danwei: '60分钟',
					// 	state: '1'
					// },
					// {
					// 	name: '合同审查',
					// 	content: '审查合同存在的问题',
					// 	image: require('../../static/img/home/t-5.png'),
					// 	money: '29.9',
					// 	danwei: '60分钟',
					// 	state: '0'
					// },
					// {
					// 	name: '诉讼指导',
					// 	content: '提供起诉，开庭指导',
					// 	image: require('../../static/img/home/t-6.png'),
					// 	money: '29.9',
					// 	danwei: '60分钟',
					// 	state: '0'
					// },
					// {
					// 	name: '线上调解',
					// 	content: '由律师代为出面协商',
					// 	image: require('../../static/img/home/t-7.png'),
					// 	money: '29.9',
					// 	danwei: '60分钟',
					// 	state: '0'
					// },
					// {
					// 	name: '法律意见书',
					// 	content: '出具解决方案报告',
					// 	image: require('../../static/img/home/t-8.png'),
					// 	money: '29.9',
					// 	danwei: '60分钟',
					// 	state: '0'
					// },
					// {
					// 	name: '法律顾问',
					// 	content: '专业律师为您服务',
					// 	image: require('../../static/img/home/t-9.png'),
					// 	money: '29.9',
					// 	danwei: '60分钟',
					// 	state: '0'
					// },
					// {
					// 	name: '法律课程',
					// 	content: '专业法律知识',
					// 	image: require('../../static/img/home/t-10.png'),
					// 	money: '29.9',
					// 	danwei: '60分钟',
					// 	state: '0'
					// },
				]
			};
		},
		created() {
			// this.getlist()
			this.getmylist()
		},


		methods: {
			submit(){
				if(!this.selList.id || !this.selList.unit ||!this.selList.time_sku || !this.selList.price){
					uni.showToast({
						title: "请填写完整",
						icon: "none"
					});
					return
				}
				this.$api({
					url: '/lawyer/set_serve_config',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						tag_id:this.selList.id,
						unit:this.selList.unit,
						time_sku:this.selList.time_sku,
						price:this.selList.price
					},
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: "配置成功",
							icon: "none"
						});
						this.pzShow = false
						this.selList = []
						this.getmylist()
					}
				})
			},
			changestatus(item,e) {
				let that = this
				let mes = "确认操作吗"
				if(e==1){
					mes = "确认上架吗"
				}
				if(e==2){
					mes = "确认下架吗"
				}
				uni.showModal({
					title: '提示',
					content: mes,
					success: function(res) {
						if (res.confirm) {
							
							that.$api({
								url: '/lawyer/change_serve_status',
								method: 'post',
								data: {
									token: uni.getStorageSync("token"),
									tag_id:item.id,
									status:e
								},
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: "配置成功",
										icon: "none"
									});
									that.getmylist()
								}
							})
						}
					}
				});
			},
			peizhi(e) {
				
				this.selList = JSON.parse(JSON.stringify(e))
				
				for(let i =0;i<this.jsList.length;i++){
					if(this.selList.unit==this.jsList[i].name){
						this.jsValue = this.jsList[i].name
						this.selList.unit = this.jsList[i].id
					}
				}
				if(this.type==2){
					this.$emit('peizhi',this.jsValue,this.selList)
				}else{
					this.pzShow = true
				}
				
			},
			getlist() {
				this.$api({
					url: '/lawyer/service',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			getmylist() {
				this.$api({
					url: '/lawyer/serve_config',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					if (res.code == 1) {
						this.mylist = res.data
					}
				})
			},
			jssel(item) {
				this.selList.unit = item.id
				this.jsValue = item.name
			}
		}
	}
</script>

<style scoped lang="scss">
	.po-bikan {
		background: #fff;
		width: 100%;
		position: relative;

		.po-bikan-top {
			padding: 40rpx 32rpx;
		}

		.btn-bo {
			width: 750rpx;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 14rpx;


			.btn_login_btn {
				width: 686rpx;
				height: 90rpx;
				background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				// margin-top: 116rpx;
				font-size: 36rpx;
				color: #fff;
				line-height: 90rpx;
				margin-left: 32rpx;
				text-align: center;
				font-weight: bold;
			}
		}

		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;

		}

		.qr-btn {
			font-size: 32rpx;
			color: #20C064;
		}

		.js-div {
			.js-item {
				width: 108rpx;
				height: 56rpx;
				background: #F5F7F8;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				font-size: 24rpx;
				color: #666666;
				text-align: center;
				line-height: 56rpx;

				&-sel {
					background: #FFEBEB;
					color: #F92626;
				}
			}
		}

		.gg-in {
			width: 686rpx;
			height: 72rpx;
			background: #F5F7F8;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 0 24rpx;
			margin-top: 24rpx;
			
			.gg-input{
				width: 586rpx;
			}
		}
	}

	.sj-st {
		font-size: 24rpx;
		color: #49C681;
	}

	.wid100 {
		width: 360rpx;
	}

	.fw-item2 {
		.fw-item {
			width: 686rpx;

			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		.wid100 {
			width: 550rpx;
		}
	}

	.fw-item {
		padding: 26rpx 24rpx;
		width: 500rpx;
		// height: 254rpx;
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 20rpx;



		.wid232 {
			width: 500rpx;
		}

		.lef-icon {
			width: 72rpx;
			height: 72rpx;
			// background: #eee;
		}

		.m-fh {
			font-weight: bold;
			font-size: 24rpx;
			color: #FC3A30;
		}

		.m-m {
			font-weight: bold;
			font-size: 36rpx;
			color: #FC3A30;
		}

		.m-sj {
			font-size: 24rpx;
			color: #666666;
		}

		.xd-btn {
			width: 128rpx;
			height: 56rpx;
			background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 56rpx;

		}

		.xd-btn2 {
			width: 128rpx;
			height: 56rpx;
			background: #FFEBEB;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			border: 2rpx solid #FF9D9D;
			font-weight: bold;
			font-size: 24rpx;
			color: #F81B19;
			text-align: center;
			line-height: 56rpx;

		}
	}
</style>